<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听力测试'"> </Breadcrumb>
        <view class="content">
          <view class="options">
            <view class="options_content options_content1" @click="courseShow = true">
              <text>{{ courseName }}</text>
              <view class="options_icon">
                <u-icon
                  name="arrow-down-fill"
                  color="#ffffff"
                  size="24"
                ></u-icon>
              </view>
              <u-select
                v-model="courseShow"
                :list="courseList"
                @confirm="courseConfirm"
                value-name="id"
                label-name="courseName"
              ></u-select>
            </view>
            <view class="options_content options_content2" @click="levelShow = true">
              <text>{{ levelName }}</text>
              <view class="options_icon">
                <u-icon
                  name="arrow-down-fill"
                  color="#ffffff"
                  size="24"
                ></u-icon>
              </view>
              <u-select
                v-model="levelShow"
                :list="levelList"
                @confirm="levelConfirm"
                value-name="id"
                label-name="levelName"
              ></u-select>
            </view>
          </view>
          <view class="list">
            <view class="list_content">
              <view
                class="item"
                :class="{ active: !item.lockFlag }"
                v-for="(item, index) in testList"
                :key="index"
                @click="startLearning(item)"
              >
                <view class="item_img">
                  <image
                    v-if="item.lockFlag"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book-lock.png"
                    mode="widthFix"
                  />
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book-unlock.png"
                    mode="widthFix"
                  />
                </view>
                <view class="item_text"> {{ item.chapterName }} </view>
                <view class="item_tips"> </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Tips :show="showTips"></Tips>
  </view>
</template>

<script>
import { findCourseList, findChapterList } from "@/api/hearing";
export default {
  data() {
    return {
      courseList: [],
      courseValue: "",
      courseName: "",
      levelList: [],
      levelValue: "",
      levelName: "",
      testList: [],
      testStatus: {},
      courseShow: false,
      levelShow: false,
      showTips: false,
    };
  },
  onLoad() {
    this.userId = this.$store.getters.userId;
    this.init();
  },
  methods: {
    init() {
      findCourseList().then((res) => {
        this.courseList = res.data;
        this.courseValue = this.courseList[0].id;
        this.courseName = this.courseList[0].courseName;
        this.levelList = this.courseList[0].levels;
        this.levelValue = this.levelList[0].id;
        this.levelName = this.levelList[0].levelName;
        this.getTest();
      });
    },
    getTest() {
      let params = {
        id: this.levelValue,
      };
      findChapterList(params).then((res) => {
        this.testList = res.data;
      });
    },
    courseConfirm(e) {
      if (e[0].value === this.courseValue) return;
      this.courseValue = e[0].value;
      this.courseName = e[0].label;
      this.courseList.some((item) => {
        if (item.id === this.courseValue) {
          this.levelList = item.levels;
          this.levelValue = this.levelList[0].id;
          this.levelName = this.levelList[0].levelName;
          return true;
        }
      });
      this.getTest();
    },
    levelConfirm(e) {
      if (e[0].value === this.levelValue) return;
      this.levelValue = e[0].value;
      this.levelName = e[0].label;
      this.getTest();
    },
    startLearning(item) {
      if (!item.lockFlag) {
        uni.navigateTo({
          url: `/pages/listening/listeningDetail?id=${item.id}`,
        });
      } else {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./listening";
</style>
